<template>
  <div class="one">
    one<span>{{ count }}</span>
    <div><button @click="Cstore">按钮</button></div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'One',
  data() {
    return {
      products: this.$store.state.products
      // count: this.$store.state.count
    }
  },
  components: {},
  // 实例初始化最之前，无法获取到data里的数据
  beforeCreate() {
  },
  // 在挂载开始之前被调用
  beforeMount() {
  },
  // 已成功挂载，相当ready()
  mounted() {
    console.log(mapState)
  },
  // 相关操作事件
  methods: {
    Cstore() {
      this.$store.commit('minusCount', 1)

      console.log(this.count)
    }
  },
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count
  })
}
</script>

<style lang="less" scoped>
  .one{

  }
</style>
